<template>
    <div class="home">
        <h1>Echarts 动态数据</h1>
        <button @click="start">开始执行</button>
        <button @click="stop">停止执行</button>
        <div style="width:100%; height:500px;" ref="main"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    name: 'Home',
    data(){
        return{
            myChart: null,
            dataList: [5,20,36,10,10,20],
            timer: null,
            option: null,
        }
    },
    methods:{
        showEcharts(){
            this.myChart = echarts.init(this.$refs.main);
            this.option = {
                title: {
                    text: 'Echarts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'line',
                        data: this.dataList,
                        smooth: true
                    }
                ]
            }
            this.myChart.setOption(this.option);
                
        },
        start(){
            this.timer = setInterval(()=>{
                // this.myChart.dispose();
                // this.showEcharts();
                this.dataList[parseInt(5*Math.random())] = parseInt(50*Math.random());
                this.myChart.setOption(this.option);
            },200)
        },
        stop() {
            clearInterval(this.timer);
        }
    },
    mounted(){
        this.showEcharts();
    }
}
</script>
